"use client";
import React, {useState} from "react";
import {Button, Group, Modal, NumberInput, Select, Stack, TextInput} from "@mantine/core";
import {useDisclosure} from "@mantine/hooks";
import {useForm} from "@mantine/form";
import {IconPlus} from "@tabler/icons-react";
import {NodeProps} from "./prop";

function AddNode() {
  // [1] 易用性：按钮的loading状态（VPN访问时网络不佳，loading做到前端防抖，增强用户体验）
  const [loading, setLoading] = useState(false);

  // [2] 核心功能：表单收集
  const form = useForm<NodeProps>({
    mode: "uncontrolled",
    // initialValues: {},
    // validate: {},
  });
  return (
    <form
      onSubmit={form.onSubmit((values) => {
        setLoading(true);
        // handleSubmit(values);
      })}
    >
      <Stack>
        <Group grow>
          <TextInput
            label="节点ID"
            placeholder="请输入节点ID"
            key={form.key("nodeId")}
            {...form.getInputProps("nodeId")}
            withAsterisk
          />
          <TextInput
            label="节点名称"
            placeholder="请输入节点名称"
            key={form.key("nodeName")}
            {...form.getInputProps("nodeName")}
            withAsterisk
          />
        </Group>
        <Group grow>
          <Select
            label="节点所属省份"
            placeholder="请选择所属省份"
            key={form.key("nodeProvince")}
            {...form.getInputProps("nodeProvince")}
            // 需要从后端获取列表，后端需要从数据底座中获取列表
            data={[
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省	",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省	",
              "广西壮族自治区	",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省	",
              "西藏自治区	",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区	",
              "新疆维吾尔自治区",
              "台湾",
              "香港特别行政区	",
              "澳门特别行政区	",
            ]}
            searchable
            clearable
            withAsterisk
          />
          <TextInput
            label="节点角色"
            placeholder="请输入节点角色"
            key={form.key("nodeRole")}
            {...form.getInputProps("nodeRole")}
            withAsterisk
          />
          <TextInput
            label="节点标签"
            placeholder="请输入节点标签"
            key={form.key("nodeLabel")}
            {...form.getInputProps("nodeLabel")}
          />
        </Group>
        <Group grow>
          <NumberInput
            label="现有端口能力（Gbps）"
            placeholder="请输入现有端口能力（Gbps）"
            key={form.key("nodePortCurr")}
            {...form.getInputProps("nodePortCurr")}
          />
          <NumberInput
            label="最大端口能力（Gbps）"
            placeholder="请输入最大端口能力（Gbps）"
            key={form.key("nodePortMax")}
            {...form.getInputProps("nodePortMax")}
          />
        </Group>
        <Group grow>
          <TextInput
            label="成对标识"
            placeholder="请输入成对标识"
            key={form.key("nodePairId")}
            {...form.getInputProps("nodePairId")}
            withAsterisk
          />

          <NumberInput
            label="成对分摊本省比例（%）"
            placeholder="请输入成对分摊本省比例（%）"
            key={form.key("nodePairPerc")}
            {...form.getInputProps("nodePairPerc")}
            withAsterisk
          />
        </Group>
        <Group justify="flex-end" mt="md">
          <Button variant="default">取消</Button>
          <Button variant="filled">确定</Button>
        </Group>
      </Stack>
    </form>
  );
}

export function AddNodeButton({disabled}: {disabled: boolean}) {
  const [opened, {open, close}] = useDisclosure(false);
  return (
    <>
      <Button size="xs" leftSection={<IconPlus size={12} />} onClick={open} disabled={disabled}>
        新增节点
      </Button>

      <Modal size="lg" title="新增节点" opened={opened} onClose={close}>
        <AddNode />
      </Modal>
    </>
  );
}
